<template>
  <div class="action-container">
    <el-form ref="actionForm" :model="action" :inline="true" size="small" label-width="100px" label-position="right">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-tag color="#e5e9f2" style="border-style: none;padding-top:3px;">
              执行操作
              <el-divider direction="vertical" />
              是否允许提交:
              <el-radio-group v-model="action.allowSubmit">
                <el-radio label="Y">允许</el-radio>
                <el-radio label="N">不允许</el-radio>
              </el-radio-group>
            </el-tag>
          </div>
        </el-col>
      </el-row>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i v-if="activeNameDescIcon" class="el-icon-caret-bottom" />
            <i v-else class="el-icon-caret-right" />
            {{ activeNameDesc }}
          </template>
          <el-divider content-position="left">覆盖</el-divider>
          <el-row>
            <el-col :span="24">
              <el-form-item label="覆盖值:" label-width="100px">
                <el-input v-model="action.overwrite" placeholder="请输入内容" size="mini" style="width: 180px;" clearable />
                <span class="prompt-f-bg">空值填null</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">替换</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="旧字符:" label-width="100px">
                <el-input v-model="action.replacementOld" placeholder="请输入内容" size="mini" style="width: 180px;" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新字符:" label-width="100px">
                <el-input v-model="action.replacementNew" placeholder="请输入内容" size="mini" style="width: 180px;" clearable />
                <span class="prompt-f-bg">空值填null</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">增加</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="前面增加:" label-width="100px">
                <el-input v-model="action.frontAppend" placeholder="请输入内容" size="mini" style="width: 180px;" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="后面增加:" label-width="100px">
                <el-input v-model="action.backAppend" placeholder="请输入内容" size="mini" style="width: 180px;" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="center" />
          <el-form-item label="提示信息:" label-width="100px">
            <el-input v-model="action.message" type="textarea" :rows="1" placeholder="请输入内容" size="mini" style="width: 180px;" clearable />
          </el-form-item>
          <el-divider content-position="center" />
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    action: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      activeName: '1'
    }
  },
  computed: {
    allowSubmit: {
      get: function() {
        return this.action.allowSubmit === 'Y'
      },
      set: function(val) {
        this.action.allowSubmit = val ? 'Y' : 'N'
      }
    },
    activeNameDesc: function() {
      return this.activeName === '1' ? '隐藏' : '展开'
    },
    activeNameDescIcon: function() {
      return this.activeName === '1'
    }
  },
  methods: {
    allowSubmitChange(val) {
      this.action.allowSubmit = val ? 'Y' : 'N'
    }
  }
}
</script>
<style scoped>
 .el-row {
    margin-bottom: 0px;
    /*&:last-child {
      margin-bottom: 0;
    }*/
  }
  .el-col {
    border-radius: 0px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 0px;
    min-height: 36px;
  }
  .row-bg {
    padding: 40px 0;
    background-color: #f9fafc;
  }
  .el-tag {
    border: 1px solid #f9fafc;
    border-style: none
  }
  .action-container >>> .prompt-f-bg{
    color:indianred;
  }
  .action-container >>> .prompt-f-bg .el-form-item__label{color:indianred}

  .action-container >>> .el-divider.el-divider--horizontal{
    margin: 10px 0;
  }
  .action-container >>> .el-form-item--small.el-form-item {
    margin-bottom: 0px
  }
</style>

